<template>
    <div>
        <header>
            <span v-for="(item, index) in list" :key="index">{{ item.name }}</span>
        </header>
        <main>
            <div class="list" v-for="(item, index) in list" :key="index">
            <div class="top">
                <span>{{ item.food }}</span>
                <span>已送达</span>
            </div>
            <div class="mid">
                <div class="left">
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.QEoro_KDVlpg3_xNz3ROrQHaFj?w=260&h=194&c=7&r=0&o=5&dpr=1.6&pid=1.7"
                        alt="">
                </div>
                <div class="right">
                    <p>{{ item.price }}</p>
                    <p>{{ item.count }}</p>
                </div>
            </div>
            <div class="down">
                <div class="zailai">再来一单</div>
            </div>
        </div>
        </main>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { name: '全部', price: 23, count: 545, food: '鸡腿堡' },
                { name: '待销费', price: 3, count: 45, food: '特色菠菜手擀面' },
                { name: '待评价', price: 43, count: 5, food: '魏家凉皮' },
                { name: '退款', price: 13, count: 245, food: '黄焖鸡' }
            ],
        }
    }
}
</script>

<style scoped>
header {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    line-height: 40px;
    color: black;
    font-weight: 700;
    font-size: 16px;
}
main{
    width: 100%;
    height: 500px;
    overflow: auto;
}

.list {
    height: 150px;
    width: 100%;
    box-shadow: 0px 0px 1px;
}

.list .top {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.list .mid {
    width: 100%;
    height: 80px;
    display: flex;
    /* background-color: gold; */
}

.list .top span:nth-child(1) {
    font-weight: 700;
    line-height: 40px;
    margin-left: 10px;
}

.list .top span:nth-child(2) {
    color: rgb(150, 154, 157);
    font-size: 12px;
    line-height: 40px;
    margin-right: 10px;
}

.list .left {
    width: 35%;
    height: 80px;
}

.list .left img {
    width: 90%;
    height: 100%;
}

.list .right {
    width: 65%;
    height: 80px;
    text-align: right;
}


.list .right p{
    margin-right: 10px;
}

.list .right p:nth-child(1) {
    font-weight: 700;
}

.list .right p:nth-child(2) {
    font-size: 12px;
    color: rgb(160, 160, 159);
}

.list .down {
    height: 30px;
    width: 100%;
    text-align: right;
    /* background-color: red; */
    overflow: hidden;
  
}

.down .zailai {
    width: 55px;
    height: 20px;
    text-align: center;
    color: skyblue;
    line-height: 20px;
    font-size: 12px;
    border: 1px solid skyblue;
    /* margin: 20px; */
    border-radius: 12px;
    margin-left: 290px;
    box-sizing: border-box;
    
}
</style>